<template>
  <div class="recommend" ref="recommend">
    <scroll class="recommend-content" :data="songList" ref="scroll">
      <div>
        <swiper class="base-swiper" :options="swiperOption">
          <!-- slides -->
          <swiper-slide v-for="item in slider" :key="item.id">
            <a :href="item.linkUrl">
              <img class="base-swiper-img" @load="loadImg" :src="item.picUrl">
            </a>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="recommend-list">
          <h1 class="list-title">热门歌单推荐</h1>
          <ul>
            <li class="item" v-for="item of songList" :key="item.id" @click="selectItem(item)">
              <div class="icon">
                <img width="60" height="60" v-lazy="item.picUrl">
              </div>
              <div class="text">
                <h2 class="name">{{item.songListAuthor}}</h2>
                <p class="desc">{{item.songListDesc}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="loading-container" v-show="!songList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading';
  import axios from 'axios';
  import {
    getRecommend
  } from 'api/recommend';
  import {
    ERR_OK
  } from 'api/config';
  import {
    playlistMixin
  } from 'common/js/mixin';
  import {
    mapMutations
  } from 'vuex';

  export default {
    name: 'Recommend',
    mixins: [playlistMixin],
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          initialSlide: 1,
          loop: true,
        },
        slider: [],
        songList: []
      }
    },
    components: {
      Scroll,
      Loading
    },
    methods: {
      _getRecommend() {
        getRecommend().then((res) => {
          if (ERR_OK === res.code) {
            const data = res.data
            this.slider = data.slider
            this.songList = data.songList
          }
        })
      },
      // getData() {
      //   axios.get('api/rec.json')
      //     .then((res) => {
      //       const data = res.data
      //       this.slider = data.slider
      //       this.songList = data.songList
      //     })
      //     .catch((err) => {
      //       console.log(err)
      //     })
      // },
      loadImg() {
        if (!this.checkLoaded) {
          this.$refs.scroll.refresh()
          this.checkLoaded = true
        }
      },
      handlePlayList(playList) {
        const bottom = playList.length > 0 ? '60px' : ''
        this.$refs.recommend.style.bottom = bottom
        this.$refs.scroll.refresh()
      },
      //点击列表
      selectItem(item) {
        this.$router.push({
          path: `/recommend/${item.id}`
        })
        this.setDisc(item)
      },
      ...mapMutations({
        setDisc: 'SET_DISC'
      })
    },
    mounted() {
      // this.getData()
    },
    created() {
      this._getRecommend()
    },
  }

</script>
